<template>
	<view class="content  container">
		<view class="WithdrawalWarp">
			<view class="WithdrawalBox flex_bt">
				<view class="left">
					<view class="label">当前余额 (元)</view>
					<view class="price">
						<block v-if="flag" >¥ <text>{{account}}</text></block>
						<block v-else>****** </block>
					<image @tap="flag=!flag" class="rightIcon" :src=" flag?'../../static/img/nosee.png' :'../../static/img/see.png' " mode=""></image>
					</view>
				</view>
				<view class="record" @tap="go('RechargeRecord')">充值记录</view>
			</view>
		</view>

		<view class="listItem listItem1">
			<view class="row j-sb a-center">
				<view class="topic flexBox">
					<view class="line"></view>
					<view class="label">充值方式</view>
				</view>
				
			</view>
			
			<view class="input_box">
				<radio-group @change="payTypeChange">
					<label class="item" v-for="(pay,index) in payList" :key="index">
						<radio style="transform:scale(0.7)" :value="pay.id.toString()" :checked="payType == pay.id"
							color="#00DB7D" />
						<text>{{pay.name}}</text>
						<!-- <image v-if="pay.id == '1'" src="../../static/img/my/yinlian.png" mode=""></image> -->
						<image v-if="pay.id == '1'" src="../../static/img/my/weixin.png" mode=""></image>
						<image v-if="pay.id == '2'" src="../../static/img/my/zhifubao.png" mode=""></image>
					</label>
				</radio-group>
			</view>
		</view>

		
		<view class="listItem2 flexBox" style="margin: 0 30rpx">
			<view class="label">¥</view>
			<input class="inp" type="number" v-model="money" 
			placeholder="请输入充值金额"  placeholder-class="inpclass" />
		</view>
		

		<view @tap="submit" class="subBtn">立即充值</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '', //余额

				number: '',
				money: '',
				payType: 2,
				payList: [ {
					id: 2,
					name: '支付宝',
					config_pay_id:2,
				}],
				flag: false
			}
		},
		
		onShow() {
			this.getAccount();
		},
		watch: {
			"money": function(newVal, oldVal) {
				if (newVal) {
					this.number = newVal;
				}
			}
		},
		methods: {
			submit() {
	
				if (!this.money) return this.toast("请输入充值金额");
				let data = {
					config_pay_id: this.payType,
					account: this.money
				}
				this.$http.post('/remittance/remittance', data).then(res => {
					if (res.code != 1) return this.toast(res.msg);
					this.toast(res.msg);
					const div = document.createElement('div')
					div.innerHTML = res.data.pay;
					document.body.appendChild(div)
					document.forms['alipay_submit'].submit();
					// this.getAccount();
				})
			},
			payTypeChange(e) {
				this.payType = e.target.value;
			},
			show(a) {
				this.number = a;
				this.money = a;
			},
			getAccount() {
				this.$http.get('draw/configDraw').then(res => {
					if (res.code != 1) return this.toast(res.msg);
					this.min = res.data.min
				})
				this.$http.get('account/account').then(res => {
					if (res.code == 1) {
						this.account = res.data[1].account;
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #1e201f;
		
	}
</style>
<style lang="scss" scoped>
	.content {
		padding-bottom: 60rpx;
		.WithdrawalWarp {
			padding: 30rpx 0 40rpx;

			.WithdrawalBox {
				width: 690rpx;
				height: 240rpx;
				border-radius: 20rpx;
				background: url(../../static/img/my/Withdrawal.png) no-repeat;
				background-size: 100%;
				margin: 0 auto;

				.left {
					margin-left: 40rpx;
					color:#2B2A2A;
					font-size: 28rpx;
				}

				.price {
					color:#2B2A2A;
					font-size: 40rpx;
					margin-top: 30rpx;

					text {
						font-size: 60rpx;
						margin-left: 10rpx;
					}
				}
				.rightIcon {
					width: 48rpx;
					height: 48rpx;
				}
				.record {
					width: 170rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					color: #333;
					font-size: 28rpx;
					background: linear-gradient(270deg, rgba(240, 186, 85, 0.7) 0%, #F0BA55 100%);
					border-radius: 44rpx 0rpx 0rpx 44rpx;
				}
			}
		}

		.listItem1 {
			margin-bottom: 20rpx;
		}

		.listItem2 {
			padding: 0 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 2rpx solid #383B3F;
			font-size: 32rpx;
			color: #aaaaaa;
			.inpclass{
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #A6AFAE;
			}
			.inp {
				flex: 1;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-left: 20rpx;
			}
		}

		.listItem3 {
			padding: 0 30rpx;
			height: 88rpx;
			line-height: 88rpx;
			color: #aaaaaa;
			font-size: 24rpx;

			.all {
				color: #00DB7D;
				font-size: 28rpx;
			}
		}

		.listItem {
			padding: 0 30rpx;

			.topic {
				height: 88rpx;
				color: #FFFFFF;
				font-size: 32rpx;

				.line {
					width: 8rpx;
					height: 28rpx;
					background-color: #00DB7D;
					border-radius: 4rpx;
					margin-right: 16rpx;
				}
			}

			.tabBox {
				display: flex;
				flex-wrap: wrap;

				.tab {
					width: 216rpx;
					height: 76rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 12rpx;
					border: 2rpx solid #424242;
					color: #A6AFAE;
					font-size: 28rpx;
					margin: 0 10rpx 20rpx 0;
				}

				.act {
					background: url(../../static/img/my/active.png) no-repeat;
					color: #00DB7D;
					border-radius: 12rpx;
					// border: 2rpx solid #00DB7D;
					background-size: 100%  100%;
				}
			}

			.input_box {
				.item {
					display: block;
					height: 100rpx;
					display: flex;
					align-items: center;
					color: aaaaaa;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-left: 20rpx;
					}

					text {
						flex: 1;
						color: #aaaaaa;
						font-size: 28rpx;
					}
				}
			}
		}

		.subBtn {
			width: 600rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: 500;
			margin: 100upx auto 0;
			background: #00DB7D;
			
		}
	}
</style>
